<template>
	<div class="order-list">
		<div class="card-item" v-for="(order, i) in orderList" :key="i">
			<!-- 订单头部 -->
			<van-cell class="card-header" :title="'订单ID：' + order.id " :label="`订单时间：${order.order_time}`">
				<template #default>
					<van-tag round type="primary">{{orderStatus(order)}}</van-tag>
					<!-- <span>{{orderStatus(order)}}</span> -->
					<van-tag round type="primary" v-if="order.status!=-1" @click="onClickOrderCancel(order.id)">取消订单</van-tag>
				</template>
			</van-cell>

			<!-- 商品列表 -->
			<van-row v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)">
				<van-col span="6">
					<van-image :src="APIDomainName + item.product_pic"></van-image>
				</van-col>
				<van-col span="18">
					<van-cell :title="item.product_name" :label="item.product_spec" class="van-ellipsis">
					</van-cell>
					<van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
						<van-col span="5">{{item.price}}</van-col>
						<van-col span="4">X</van-col>
						<van-col span="5">{{item.count}}</van-col>
						<van-col span="3">=</van-col>
						<van-col span="7">{{item.price *item.count }}</van-col>
					</van-row>
				</van-col>
			</van-row>

			<!-- 合计信息 -->
			<div class="amount">
				实付金额：
				<span style="color:red">¥{{ orderAmount(order) }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getOrderListAPI, //获取订单列表
		cancleOrderByIdAPI //取消订单
	} from "@/api/order.js";

	export default {
		name: "orderList",
		data() {
			return {
				orderList: [], //订单列表
			}
		},

		//生命周期钩子函数		
		created() {
			this.getOrderList();
		},

		methods: {
			//获取订单列表			
			getOrderList() {
				getOrderListAPI().then(result => {
					console.log(result); //调式输出
					this.orderList=[]; //清空数据
					this.orderList = result.data;
				});
			},

			//订单状态格式转换
			orderStatus(order) {
				let status = "未知";
				switch (order.status) {
					case 0:
						status = "未支付";
						break;
					case 1:
						status = "已支付";
						break;
					case -1:
						status = "已取消";
						break;
				}
				return status;
			},

			// 触发取消订单
			onClickOrderCancel(id) {
				cancleOrderByIdAPI(id).then(() => {
					this.getOrderList(); //刷新列表数据
				});
			},


			// 触发导航到订单详情（此时该路由功能还没有实现）			
			onClick2OrderDetail(id) {				
				this.$router.push({
					name: "orderDetail",
					params: {
						id
					}
				});
			},

			//计算一个订单的总金额			
			orderAmount(order) {
				let total = 0;
				order.detailList.forEach(item => {
					total += item.count * item.price;
				});
				return total.toFixed(2);
			},
		},

	}
</script>

<style lang="less" scoped="scoped">
	.order-list {
		background-color: #f3f3f3;
	}

	.card-item {
		margin: 10px;
		padding: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 16px;
	}

	.card-header {
		padding: 5px 5px;

		font-size: 16px;
		font-weight: bolder;
		display: flex;
		justify-content: space-between;

		::v-deep .van-cell__value {
			color: #070100;
		}
	}

	.amount {
		padding: 5px 5px;
		text-align: right;
		color: #6b6969;
		font-weight: bold;
		background-color: rgb(216, 219, 217);
		font-size: 20px;
	}
</style>
